<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>event-object &lsaquo; KISSY Docs</title>
<link rel="stylesheet" href="../assets/base-min.css" />
<link rel="stylesheet" href="../assets/docs.css" />
</head>
<body class="w866">
<div id="header">
    <a class="logo" href="../index.html"><img src="../assets/logo.png" alt="KISSY" width="138" height="74" /></a>
    <p class="rel-nav">
        <a href="http://github.com/kissyteam/kissy/blob/master/src/event/event-object.js"><code>event-object.js</code></a>
    </p>
</div>
<div id="content" class="layout grid-s232m0">
    <div class="col-main">
        <div class="main-wrap">

            <div class="section summary">
                <p>了解 EventObject 前，我们先来回顾下蛮荒时代的代码：</p>
<pre style="padding-top: 0"><code>
    document.onclick = function(ev) {
        ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        // more code
    };
</code></pre>
                <p>如此熟悉又丑陋的代码，请先努力保持住喷涌而出的泪水，我们来再次认识下 ev 参数。</p>
                <p>翻查 MSDN, 可以得知 ev 就是传说中的 event object. 这个对象因其兼容性问题而让开发者痛苦不堪。然而，抛开兼容性问题，该对象的设计还是非常不错的。在这个对象里，存储了与事件相关的属性和方法，比如 target, preventDefault 等，非常实用。</p>
                <p>有鉴于此，KISSY 将原生的 event object 封装成 KISSY.EventObject, API 基本遵循 <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html">DOM-Level-3-Events</a> 规范。忘掉兼容性吧，还 event object 本色！</p>
            </div>

            <div class="section">
                <h3 id="props">Properties</h3>

                <p>ev 拥有的属性非常多，不同类型的事件，ev 的属性也有不同。目前支持的属性列表如下：</p>
<pre class="example-code"><code>
altKey attrChange attrName bubbles button cancelable charCode
clientX clientY ctrlKey currentTarget data detail eventPhase
fromElement handler keyCode layerX layerY metaKey newValue
offsetX offsetY originalTarget pageX pageY prevValue relatedNode
relatedTarget screenX screenY shiftKey srcElement target
toElement view wheelDelta which
</code></pre>
                <p>除了以上属性，ev 还拥有以下属性：</p>
<pre class="example-code"><code>
isDefaultPrevented isPropagationStopped isImmediatePropagationStopped
</code></pre>
                <p>你还可以给 ev 添加自定义属性，这将在 <a href="event-target.html">event-target</a> 中讲述。</p>
            </div>

            <div class="section">
                <h3 id="methods">Methods</h3>

                <div class="member method">
                    <h4>
                        <a name="method_preventDefault">preventDefault</a>
                        <code>void <em>preventDefault</em>()</code>
                    </h4>
                    <div class="detail">
                        <p>阻止默认行为的发生。</p>
<pre class="example-code"><code>
var S = KISSY, Event = S.Event;

// 最常规的用法：阻止链接跳转
Event.add('#linkId', 'click', function(ev) {
    ev.preventDefault();
    // more code
});
</code></pre>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_stopPropagation">stopPropagation</a>
                        <code>void <em>stopPropagation</em>()</code>
                    </h4>
                    <div class="detail">
                        <p>停止事件冒泡。</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_stopImmediatePropagation">stopImmediatePropagation</a>
                        <code>void <em>stopImmediatePropagation</em>()</code>
                    </h4>
                    <div class="detail">
                        <p>停止当前事件冒泡。不光停止冒泡到下一个事件目标，当前目标上的任何后续监听函数，也马上取消执行。</p>
                        <p>测试页面：<a href="http://kissyteam.github.com/kissy/docs/event/example-stopImmediatePropagation.html">example-stopImmediatePropagation.html</a></p>
                        <p class="notice">目前主流浏览器都尚未原生支持 stopImmediatePropagation 方法。当同时使用多个类库时，该方法可能不会达到预期，需谨慎。</p>
                    </div>
                </div>

                <div class="member method">
                    <h4>
                        <a name="method_halt">halt</a>
                        <code>void <em>halt</em>(immediate)</code>
                    </h4>
                    <div class="detail">
                        <p>halt() 等价 stopPropagation() + preventDefault()</p>
                        <p>halt(true) 等价 stopImmediatePropagation() + preventDefault()</p>
                    </div>
                </div>

            </div>

            <div class="section notes">
                <p>看到此处，或许有一点感觉了，但似乎离“只要你能想到，它基本上就能做到”还有比较远的距离。</p>
                <p>请继续阅读 <a href="event-target.html">event-target</a></p>
            </div>
        </div>
    </div>
    <div class="col-sub">
        <div class="sub-wrap">
            <div class="loc">
                <a href="../index.html">home</a> &rsaquo;
                <a href="index.html">event</a> &rsaquo;
                event-object :
            </div>
            <div class="toc">
                <h3>Properties</h3>
                <ul>
                    <li><a href="#props">type</a></li>
                    <li><a href="#props">target</a></li>
                    <li><a href="#props">relatedTarget</a></li>
                    <li><a href="#props">currentTarget</a></li>
                    <li><a href="#props">pageX</a></li>
                    <li><a href="#props">pageY</a></li>
                    <li><a href="#props">which</a></li>
                    <li><a href="#props">...</a></li>
                </ul>
                <h3>Methods</h3>
                <ul>
                    <li><a href="#method_preventDefault">preventDefault</a></li>
                    <li><a href="#method_stopPropagation">stopPropagation</a></li>
                    <li><a href="#method_stopImmediatePropagation">stopImmediatePropagation</a></li>
                    <li><a href="#method_halt">halt</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <p class="copyright">&copy; 2009 - 2029 KISSY UI LIBRARY</p>
</div>
</body>
</html>
